<template>
  <view :class="'grid col-'+colNum">
  	<view :class="'text-center '+[showPadding=='2'?'padding-xs':'']"  v-for="(item,index) in list" :key="index">
      <view v-if="item.operateType==3" >
		  <button open-type="contact" class="cs_button">
		  <view :style="'position: relative;height:'+listHeight+';width:'+listWidth+'; margin:0px auto;'">
		    <image  referrer="no-referrer|origin|unsafe-url" mode="aspectFit" :src="item.files" :style="'height: '+listHeight+'; position: absolute;left: 0px; top: 0px;'"></image>
		    <view v-if="item.badge!=null && item.badge >0" class='cu-tag badge'>{{item.badge}}</view>
		  </view>
		  <text :class="color" v-if="nameShow && item.name!=null && item.name!=''" :style="'line-height:'+textLineHeight+';'">{{item.name}}</text>
		</button>
	  </view>
	 <view v-else-if="item.operateType==4"  @click="callPhone" :data-phone="item.operateParams">
	 		  <view :style="'position: relative;height:'+listHeight+';width:'+listWidth+'; margin:0px auto;'">
	 		    <image  referrer="no-referrer|origin|unsafe-url" mode="aspectFit" :src="item.files" :style="'height: '+listHeight+'; position: absolute;left: 0px; top: 0px;'"></image>
	 		    <view v-if="item.badge!=null && item.badge >0" class='cu-tag badge'>{{item.badge}}</view>
	 		  </view>
	 		  <text :class="color" v-if="nameShow && item.name!=null && item.name!=''" :style="'line-height:'+textLineHeight+';'">{{item.name}}</text>
	 </view>
	 <view v-else @click="jumpPage" :data-jumpUrl="item.operateParams" :data-id="item.id" :data-jumpType="item.operateType">
	 		  <view :style="'position: relative;height:'+listHeight+';width:'+listWidth+'; margin:0px auto;'">
	 		    <image  referrer="no-referrer|origin|unsafe-url" mode="aspectFit" :src="item.files" :style="'height: '+listHeight+'; position: absolute;left: 0px; top: 0px;'"></image>
	 		    <view v-if="item.badge!=null && item.badge >0" class='cu-tag badge'>{{item.badge}}</view>
	 		  </view>
	 		  <text :class="color" v-if="nameShow && item.name!=null && item.name!=''" :style="'line-height:'+textLineHeight+';'">{{item.name}}</text>
	 </view>
    </view>
  </view>
</template>
<script>
  export default{
    data(){
      return {
        listHeight:'80upx',
        listWidth:'auto',
		textLineHeight:'30upx',
        list:[],
      }
    },
    props:{
		color:{
			type:String,
			default(){
			  return ""
			}
		},
		//list数据类型：1、默认初始化，2、方法调用初始化
		listType:{
		  type:String,
		  default(){
		    return "1"
		  }
		},
		nameShow:{
		  type:Boolean,
		  default(){
		    return true
		  }
		},
		textHeight:{
		  type:String,
		  default(){
		    return 50+"";
		  }
		},
		//审核类型：1、不审核，2、审核不通过，弹窗提示，3、审核不通过，跳转页面
		checkType:{
		  type:String,
		  default(){
		    return "1"
		  }
		},
		checkPage:{
		  type:String,
		  default(){
		    return "/pages/my/my"
		  }
		},
      showPadding:{
        type:[String,Number],
        default(){
          return "2"
        }
      },
      height:{
        type:[String,Number],
        default(){
          return uni.upx2px(80)+'px';
        }
      },
      width:{
        type:[String,Number],
        default(){
          return ""
        }
      },
      colNum:{
        type:[String,Number],
        default(){
          return "3"
        }
      },
	  maxNum:{
		type:Number,
		default(){
		  return -1
		}  
	  },
      btnList:{
        type:Array
      }
    },
    watch: {
      btnList:{
        handler(newValue, oldValue) {
			this.changeList(newValue);
			
        },
        deep:true
      },
	  textHeight:{
	    handler(newValue, oldValue) {  
	  		  var textHeight=newValue;
	  		 this.textLineHeight=uni.upx2px(textHeight)+'px';
	    },
	    deep:true
	  },
	  height:{
	    handler(newValue, oldValue) {  
	  		  var height=newValue;
	  		 this.listHeight=uni.upx2px(height)+'px';
	    },
	    deep:true
	  },
	  width:{
	    handler(newValue, oldValue) {  
	  		  var width=newValue;
			 if(width!=null&&width!=""&&width!='undefined'){
			   this.listWidth=uni.upx2px(width)+'px';
			 }else{
			   this.listWidth='auto';
			 }
	    },
	    deep:true
	  }
    },
    mounted() {
		this.changeList(this.btnList);
		 this.textLineHeight=uni.upx2px(this.textHeight)+'px';
      this.listHeight=uni.upx2px(this.height)+'px';
      if(this.width!=null&&this.width!=""&&this.width!='undefined'){
        this.listWidth=uni.upx2px(this.width)+'px';
      }else{
        this.listWidth='auto';
      }
    },
    methods:{
		callPhone(e){
		  var phone=e.currentTarget.dataset.phone;
		  uni.makePhoneCall({
		      phoneNumber: phone
		    });
		},
	  changeList:function(newList){
		  this.list=[];
		  newList.forEach((obj,index)=>{
			  if(!(this.maxNum>0&&index>=this.maxNum)){
				  this.list.push(obj);
			  }
		  })
	  },
      jumpPage(e) {
		let type=true;
		if(this.checkType!="1"){
			//验证
			let token=uni.getStorageSync('token');
			if(token==null||token==""){
				type=false;
			}
		}
		if(type){
			var jumpType=e.currentTarget.dataset.jumptype;
			var jumpurl=e.currentTarget.dataset.jumpurl;
			if(jumpurl!=null&&jumpurl!=""){
			  if(jumpType==1){
			   uni.redirectTo({
			   	url:jumpurl,
			   })
			  }else if(jumpType==99){
			   var id=e.currentTarget.dataset.id;
			   this.$emit("btnClick",id);
			  }else{
			    uni.navigateTo({
			    	url:jumpurl,
			    })
			  }
			}
		}else if(this.checkType=="2"){
			uni.showModal({
				title: '',
				content:'请先登录/注册',
			    showCancel:false,
				success: function(res) {
				}
			});
		}else if(this.checkType=="3"){
			uni.redirectTo({
				url:this.jumpPage,
			})
		}
      }
    }
  }
  
</script>


<style>

  .cs_button {
    border: 0px;
    padding-left: 0px;
    padding-right: 0px;
    text-align:center;
	background-color:none;
	background: none;
	line-height:0upx;
  }
  .cs_button:after {
    border: 0px;
  }

</style>